<template>
  <div class="text-center">
    <v-dialog v-model="dialog" width="500" :persistent="true">
      <template v-slot:activator="{ on, attrs }">
        <v-btn icon color="red lighten-2" dark v-bind="attrs" v-on="on">
          <j-icon color="rgb(229, 115, 115)">mdi-washing-machine</j-icon>
        </v-btn>
      </template>

      <v-card ref="form">
        <v-card-title class="purple lighten-2" style="color: #fff"> 请输入连接码 </v-card-title>
        <v-card-text>
          <v-alert v-if="errorVisable" type="error">没有这个连接码</v-alert>
          <div class="ticp mt-10">如果没有连接码，请先退出打开一个投影端来获取连接码</div>
          <v-text-field
            ref="code"
            v-model="code"
            :rules="[rules.required, rules.counter]"
            label="连接码"
            class="mt-10"
            outlined
          ></v-text-field>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="" @click="$router.back()"> 退出 </v-btn>
          <v-btn color="primary" @click="handleSubmit"> 确定 </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>
<script>
export default {
  props: {
    pageId: {
      type: String,
      defautlt: "",
    },
  },
  data() {
    return {
      code: "",
      dialog: false,
      rules: {
        required: (value) => !!value || "请填写连接码",
        counter: (value) => value.length === 4 || "4个字符",
      },
      errorVisable: false,
      errorMessage: "",
    };
  },
  computed: {
    form() {
      return {
        code: this.code,
      };
    },
  },
  methods: {
    show(code) {
      code ? (this.code = code) : "";
      this.dialog = true;
    },
    showAlert(errorMessage, durition = 2000) {
      this.errorMessage = errorMessage;
      this.errorVisable = true;
      setTimeout(() => {
        this.errorVisable = false;
      }, durition);
    },
    async handleSubmit() {
      if (this.$refs.code.validate(true)) {
        // const isFullRes = await isFull(this.code)
        // console.log(isFullRes)
        // if (isFullRes.length <= 0) {
        //   this.showAlert('没有这个连接码')
        //   return
        // }
        this.$emit("submit", this.code);
        this.dialog = false;
      }
    },
  },
};
</script>
<style scoped>
.ticp {
  height: 30px;
  line-height: 30px;
}
</style>
